<template>
	<RkContainer :isFooter="false" :isAside="true">
		<template #header_left></template>
		<template #header_right>
			<el-button type="primary" @click="handleAdd">新增</el-button>
			<el-button @click="handleEdit">修改</el-button>
			<el-button @click="handleDelete" type="danger">删除</el-button>
		</template>
		<template #aside>
			<RkMenuTree ref="menuTreeRef" @nodeClick="handleTreeNodeClick" @currentChange="handleTreeNodeChange" />
		</template>
		<template #main>
			<rk-center>
				<template #content>
					<rk-grid
						ref="tableGridRef"
						boxConfig="radio"
						dataUrl="/menu/getMenuList"
						:title="route.meta.title"
						:params="queryParams"
						:columns="tableColumns"
						:pagerConfig="false"
					>
						<template #menu-icon="{ row }">
							<RkIcon v-if="row.icon" :icon-class="row.icon" />
							<span v-else></span>
						</template>
					</rk-grid>
				</template>
			</rk-center>
		</template>
		<MenuInfoDialog ref="menuInfoDialogRef" :parentNode="selectTreeNode" @confirm="handleConfirm" />
	</RkContainer>
</template>

<script setup>
import XEUtils from 'xe-utils';
import { RkIcon } from '@/components/icons';
import { RkMenuTree } from '@/components/tree';
import MenuInfoDialog from './MenuInfoDialog.vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useMenuApi } from '@/api';
import { RkConfirmBox } from '@/components/message-box';
import { SINGLE_SELECT_TIPS } from '@/common/cons-common.js';

const { deleteMenu } = useMenuApi();

// 获取当前路由
const route = useRoute();

// ----- 树结构操作
const menuTreeRef = ref();
const selectTreeNode = ref();
const handleTreeNodeClick = (data, treeNode) => {
	queryParams.menuCode = data.menuCode;
	selectTreeNode.value = XEUtils.clone(data, true);
	handleSearch();
};
const handleTreeNodeChange = (data, treeNode) => {
	selectTreeNode.value = XEUtils.clone(data, true);
};

// ----- 表格相关操作
const queryParams = reactive({
	menuCode: '',
});
const tableGridRef = ref();
const tableColumns = ref([
	{ field: 'menuCode', title: '菜单编码', sortable: true, width: 150, align: 'left' },
	{ field: 'menuName', title: '菜单名称', width: 200, align: 'left' },
	{ field: 'menuAlias', title: '菜单别名', width: 200, align: 'left' },
	{ field: 'menuOrder', title: '菜单排序', width: 100, align: 'left' },
	{
		field: 'status',
		title: '是否启用',
		width: 100,
		align: 'center',
		formatter: ['enumsFormats', 'COMMON_STOP_OPEN_MT_ENUMS'],
	},
	{
		field: 'invisible',
		title: '是否显示',
		width: 100,
		align: 'center',
		formatter: ['enumsFormats', 'MENU_INVISIBLE_ENUMS'],
	},
	{
		field: 'menuType',
		title: '菜单类型',
		width: 100,
		align: 'center',
		formatter: ['enumsFormats', 'MENU_TYPE_ENUMS'],
	},
	{ field: 'permission', title: '权限标识', width: 150, align: 'left' },
	{ field: 'icon', title: '菜单图标', width: 100, align: 'center', slots: { default: 'menu-icon' } },
	{ field: 'parentId', title: '父级菜单', width: 150, align: '' },
	{ field: 'routerPath', title: '路由路径', width: 200, align: 'left' },
	{ field: 'routerComponent', title: '组件地址', width: 280, align: 'left' },
	// { field: 'routerRedirect', title: '重定向路径', width: 200, align: 'left' },
	{ field: 'fullUrl', title: '请求地址', width: 320, align: 'left' },
	{ field: 'levelNo', title: '菜单次级', width: 100, align: 'center' },
	{ field: 'routerLink', title: '外链地址', width: 250, align: 'left' },
]);
const handleSearch = () => {
	tableGridRef.value.searchEvent();
};
const menuInfoDialogRef = ref();
const handleAdd = () => {
	if (selectTreeNode.value) {
		const { fullData } = tableGridRef.value.getTableData();
		menuInfoDialogRef.value.handleAdd({
			tableData: fullData,
			currentRow: {},
			parentNode: selectTreeNode.value,
		});
	} else {
		ElMessage({
			type: 'warning',
			grouping: true,
			message: '请选择菜单节点进行操作!',
		});
		// ElMessage.warning('请选择菜单节点进行操作!')
	}
};
const handleEdit = () => {
	const row = tableGridRef.value.getRadioRecord();
	if (row) {
		const { fullData } = tableGridRef.value.getTableData();
		menuInfoDialogRef.value.handleEdit({
			tableData: fullData,
			currentRow: row,
			parentNode: selectTreeNode.value,
		});
	} else {
		ElMessage({
			type: 'warning',
			grouping: true,
			repeatNum: 1,
			message: SINGLE_SELECT_TIPS,
		});
		// ElMessage.warning(SINGLE_SELECT_TIPS)
	}
};
const handleConfirm = () => {
	menuTreeRef.value.reloadTreeData();
	handleSearch();
};
const handleDelete = () => {
	const row = tableGridRef.value.getRadioRecord();
	if (row) {
		const params = { menuCode: row.menuCode };
		RkConfirmBox({
			title: '提示',
			content: '确定删除已选数据？',
			onSubmit: function () {
				deleteMenu(params)
					.then((res) => {
						const { code, msg } = res;
						if (code === 200) {
							ElMessage.success('删除成功！');
							handleConfirm();
						} else {
							ElMessage.error(msg);
						}
					})
					.catch((err) => {
						ElMessage.error('删除失败！');
					});
			},
			onCancel: function () {},
		});
	} else {
		ElMessage.warning('请选择一条数据进行操作！');
	}
};
</script>

<style lang="scss" scoped></style>
